import React, { Component } from 'react';

import {
  StyleSheet, View, TouchableWithoutFeedback, Image, Text,
} from 'react-native';
import * as todoService from '../../../services/todo';
import { ipConfig } from '../../../services/config';

import Theme from '../../../native-base-theme/variables/commonColor';

class TaskItemImage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 0,
    };
  }

  toTaskDeviceDetail = (item) => {
    global.navigation.navigate({
      routeName: 'TaskDeviceDetail',
      params: {
        equipcheckId: item.equipcheckId,
        equipmentCode: item.equipmentCode,
        equipmentName: item.equipmentName,
      },
    });
  }

  render() {
    const { item } = this.props;

    let source = { uri: `${ipConfig.url(todoService.imageUrl)}${item.showImage}?token=${global.__TOKEN_ACCESS__}` };
    // const userId = global.user.name;
    // const userOrgId = global.user.organization.id;


    if (this.state.type === 1) {
      source = require('../../../../assets/images/no-pic.png');
    }
    let dotColor = '#29e121';
    if (item.resultName == '异常') {
      dotColor = '#e13821'; // 红色
    } else if (item.resultName == '异常但不影响运行') {
      dotColor = 'yellow'; // 绿色
    } else {
      dotColor = '#29e121'; // 绿色
    }
    // if (item.failureStatus == '01') {
    //   dotColor = '#1a192d'; // 背景色
    // } else if (item.failureStatus == '02' || item.failureStatus == '03' || item.failureStatus == '04') {
    //   dotColor = '#b9b9b9'; // 灰色
    // } else if (userId == item.reporter) {
    //   if (item.failureStatus == 30) {
    //     dotColor = '#e13821'; // 红色
    //   } else {
    //     dotColor = '#29e121'; // 绿色
    //   }
    // } else if (userOrgId == item.maintOrgId) {
    //   if (item.failureStatus == 10 || item.failureStatus == 20) {
    //     dotColor = '#e13821'; // 红色
    //   } else {
    //     dotColor = '#29e121'; // 绿色
    //   }
    // }

    // let level = '高';
    // if (item.failureLevel === 'A') {
    //   level = '高';
    // } else if (item.failureLevel === 'B') {
    //   level = '中';
    // } else {
    //   level = '低';
    // }

    return (
      <TouchableWithoutFeedback onPress={() => this.toTaskDeviceDetail(item)}>
        <View style={styles.rootContainer}>
          <Image
            style={styles.image}
            source={source}
            fadeDuration={0}
            onError={() => {
              this.setState({
                type: 1,
              });
            }
            }
          />
          <View style={styles.info_container}>
            <View style={styles.info_titleContainer}>
              {/* <Text style={[styles.info_badge, { backgroundColor: dotColor }]} /> */}
              <View style={[styles.level, { backgroundColor: dotColor, borderColor: 'white' }]} />
              <View>
                <Text style={styles.info_title} numberOfLines={1}>
                  {item.equipmentName}
                </Text>
              </View>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const styles = StyleSheet.create({
  rootContainer: {
    margin: 2,
    width: 100,
    height: 120,
    // backgroundColor: Theme.myPrimary,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 100,
    height: 120,
  },
  level: {
    marginRight: 8,
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 15,
    width: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  info_container: {
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    padding: 4,
    position: 'absolute',
    bottom: 0,
    zIndex: 1,
  },
  info_titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  info_title: {
    fontSize: 15,
    width: 70,
    color: 'white',
  },
  info_badge: {
    marginRight: 4,
    borderStyle: 'solid',
    borderColor: '#ffffff',
    borderWidth: 2,
    width: 20,
    height: 20,
    borderRadius: 10,
  },
});

export default TaskItemImage;
